<template>
    <div class="box">
        <div class="box-header">
            <Header></Header>
        </div>
        <div class="cotentValue">
            <div class="box-left">
                <div class="scroll-boxone">
                    <div class="scroll-boxtwo">
                        <div class="scroll-boxthree">
                            <div @click="changeFlag(index)" :class="['scroll-item', flag == index && 'active']"
                                v-for="(item, index) in categoryFirstList" :key="index">{{ item.title }}</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="box-right" @scroll="handScroll" ref="boxRight">
                <div class="showlist" v-for="(item, index) in categoryFirstList" :key="index">
                    <div class="box-top">
                        <div @click="goCategorydetail(item.id, item.title)"
                            :class="['top-left', flag == index && 'actright', 'name']">{{ item?.title }}</div>
                        <div class="top-right">></div>
                    </div>
                    <div class="box-bottom">
                        <div class="bottom-text" v-for="(a, index) in item?.subCategories" :key="index">
                            <div class="text-item" @click="goCategorydetail(item.id, i.name)"
                                v-for="(i, index) in a.metadataValues" :key="index">
                                {{ i.name }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import Header from "@/components/Header/Header"
import categoryApi from "@/api/category";
import { onMounted, computed, ref, onUnmounted, nextTick } from "vue"
import { useRouter } from "vue-router";
const router = useRouter()
const flag = ref(0)
const boxRight = ref()
const rightFlag = ref(0)
const goCategorydetail = (id, name) => {

    router.push({
        name: 'categorydetail',
        params: {
            id: id,
            name: name
        }
    })
}
// const changeRightFlex = (index) => {

//     rightFlag.value=index
// }
// 左侧滚动事件
const itemShowlist = document.getElementsByClassName('showlist')
const scrollItem=document.getElementsByClassName('scroll-item')
const changeFlag = (index) => {
    flag.value = index
    itemShowlist[index].scrollIntoView({
        behavior: 'smooth',
        block:'start',
        inline:'start'
    })
}
// 右侧滚动事件
const handScroll = (e) => {
    
    let scrollItems = document.querySelectorAll('.showlist');
    for (let i = scrollItems.length - 1; i >= 0; i--) {
        // 判断滚动条滚动距离是否大于当前滚动项可滚动距离
        // console.log(scrollItems.length)
      let judge = e.target.scrollTop >= scrollItems[i].offsetTop - scrollItems[0].offsetTop;
      if (judge) {
          flag.value = i;
          scrollItem[i].scrollIntoView({
        behavior: 'smooth',
        block:'start',
        inline:'start'
    })
        // console.log('222',flag.value)
        break;
      }
    }
};
  

const categoryFirstList = ref([])
const getCategoryFirst = async () => {
    let result = await categoryApi.reqCategoryFirst()
    // console.log(result)
    categoryFirstList.value = result.data
}


// const onScroll=()=> {
//       const navContents = document.querySelectorAll('.name') // 获取所有需要需要锚点定位的DOM元素
//       const offsetTopArr = []
//       navContents.forEach(item => {
//         offsetTopArr.push(item.offsetTop)   // 获取上面DOM元素距离顶部的距离
//       })
//       const scrollTop = document.documentElement.scrollTop || document.body.scrollTop // 获取页面滚动了距离
//       let navIndex = 0
//       for (let n = 0; n < offsetTopArr.length; n++) {
//         if (scrollTop >= offsetTopArr[n]  ) { // 下面介绍为啥-200
//           navIndex = n
//         }
//       }
//       highLight.value = navIndex
//     }
// const scrollTo = (index) => {
//     // 获取高亮导航对应的锚点定位元素的 offsetTop
//     let targetOffsetTop
//     if (index == 0) {
//         targetOffsetTop = ref.oneBox1.offsetTop
//     } else if (index == 1) {
//         targetOffsetTop = ref.oneBox2.offsetTop
//     } else if (index == 2) {
//         targetOffsetTop = ref.oneBox3.offsetTop
//     } else if (index == 3) {
//         targetOffsetTop = ref.oneBox4.offsetTop
//     } else if (index == 4) {
//         targetOffsetTop = ref.oneBox5.offsetTop
//     }
// }
// const navContents=ref([])
// const offsetTopArr = ref([])
// const onScroll = () => {
//     const navContents = document.querySelectorAll('.name')
    
// navContents.forEach(item => {
//     offsetTopArr.push(item.offsetTop)
//   })
// }
// const scrollTop = document.documentElement.scrollTop || document.body.scrollTop
//   定义当前点亮的导航下标
  
//   for (let n = 0; n < offsetTopArr.length; n++) {
//     如果 scrollTop 大于等于第 n 个元素的 offsetTop 则说明 n-1 的内容已经完全不可见
//     那么此时导航索引就应该是 n 了
//     if (scrollTop >= offsetTopArr[n]) {
//         rightFlag.value = n
//     }
//   }

onMounted(() => {
    getCategoryFirst()
    // window.addEventListener('scroll', onScroll)

})
onUnmounted(() => {
    window.removeEventListener('scroll', ()=>{})
})
</script>

<style scoped>
.box {
    width: 100%;
    height: 100%;

    .box-header {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 3;
        background: white;
    }

    .cotentValue {
        position: fixed;
        top: 50px;
        /* margin-top: 50px; */
        display: flex;
        justify-content: space-between;

        .box-left {
            width: 24%;

            .scroll-boxone {
                overflow: hidden;

                .scroll-boxtwo {
                    overflow-y: scroll;
                    height: 667px;

                    &::-webkit-scrollbar {
                        display: none;
                    }

                    .scroll-boxthree {
                        display: flex;
                        flex-direction: column;
                        align-items: center;

                        /* justify-content: center; */
                        .scroll-item {
                            font-size: 14px;
                            text-align: center;
                            width: 100%;
                            line-height: 50px;
                            height: 50px;
                            border-bottom: 1px solid #bbb;
                        }

                        .active {
                            border-left: 5px solid rgb(234, 94, 78);
                        }
                    }
                }
            }



        }

        .box-right {
            width: 70%;
            font-size: 14px;
            height: 667px;
            overflow-y: scroll;

            &::-webkit-scrollbar {
                display: none;
            }

            .box-top {
                display: flex;
                justify-content: space-between;
                height: 50px;
                align-items: center;
                border-bottom: 1px solid #bbb;

                .top-left {
                    font-weight: 800;
                }

                .top-right {
                    margin-right: 20px;
                }

                .actright {
                    color: rgb(234, 94, 78);
                    ;
                }
            }

            .box-bottom {
                
                flex-wrap: wrap;

                .bottom-text {
                    display: flex;
                    flex-wrap: wrap;
                    
                }
                .text-item{
                    margin-top: 15px;
                    margin-right: 12px;
                    margin-bottom: 17px;
                }

            }
        }
    }
}</style>
